<template>
	<view class="header">
		<u-sticky offset-top="0">
			<view>
				<view style="background-color: #fff;" class="flex flex-ai-c search">
					<view style="width: 600rpx;margin-left: 24rpx;">
						<u-search height="60" @change="change" v-model="searchKey" placeholder="保养项目/换轮胎/洗车美容" :show-action="false"
						 @search="onSearch"></u-search>
					</view>
					<view class="text" @click="textSearch">搜索</view>
				</view>

				<view v-for="(item,index) in resultList" :key='item.id' class="search-select">
					<view class="search-select2 flex flex-ai-c flex-jc-sb" @click="onSearchList(item.maintenance_Type_Name)">
						<rich-text :nodes="brightenKeyword(item.maintenance_Type_Name,searchKey)"></rich-text>
						<!-- <rich-text :nodes="item"></rich-text> -->
						<view>
							<i-icon icon="iconsousuo" size="40rpx" color="rgb(253,215,42)"></i-icon>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 热门搜索 -->
		<view class="hot" v-show="show">
			<view class="hot-title">热门搜索</view>
			<view class="hot-main flex flex-wrap-w">
				<view v-for="(item,index) in hotList" :key='item.id' class="hot-name flex flex-ai-c flex-jc-sb" @click="hotSearch(item)">
					<view>
						<image src="https://files.yzsheng.com/client/me/img/huo.png" style="width: 32rpx;height: 39rpx;"></image>
					</view>
					<view style="margin-left: 15rpx;">{{item.words}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script src="./maintenanceSearch.js"></script>

<style lang="scss" scoped>
	@import './maintenanceSearch.scss';

	.fade-enter-active,
	.fade-leave-active {
		transition: all 0.5s;
	}
	.fade-enter,
	.fade-leave-to
	/* .fade-leave-active below version 2.1.8 */
		{
		opacity: 0;
		height: 0;
	}

	.search-select {
		width: 100%;

		.search-select2 {

			line-height: 70rpx;
			color: #000000;
			padding: 0 24rpx;
		}
	}

	//默认图
	.defaultMap {
		padding-top: 100rpx;
		width: 750rpx;
		height: 85vh;
		text-align: center;

		image {
			width: 263rpx;
			height: 277rpx;
		}

		.texna {
			font-size: 28rpx;
			color: #999999;
		}
	}
</style>
